@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
  html {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
  }
  
  body {
    margin: 0;
    background-color: #f5f5f5;
  }
}

@layer components {
  .page-container {
    @apply min-h-screen bg-gray-50;
  }
  
  .header {
    @apply bg-primary-500 text-white text-center py-4 font-semibold text-lg sticky top-0 z-50;
  }
  
  .footer-nav {
    @apply fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40;
  }
  
  .footer-nav-item {
    @apply flex-1 flex flex-col items-center py-2 text-xs;
  }
  
  .footer-nav-item.active {
    @apply text-primary-500;
  }
  
  .footer-nav-item:not(.active) {
    @apply text-gray-500;
  }
}